<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>确认订单 </title>
  <link rel="stylesheet" href="mobile/layui/css/layui.mobile.css">
  <link rel="stylesheet" href="mobile/layui/css/layui.css">
  <link rel="stylesheet" href="mobile/css/yj_css.css">
</head>
<body>
  <header class="yj-header">
    <a href="javascript:history.go(-1)" class="yj-header-return layui-icon">&#xe603;</a>
    <span>确认订单</span>
    <a class="yj-header-meau"></a>
  </header>
  <div class="yj-content">
    <div class="yj-confirm-info yj-mar-b">
      <div class="yj-bgfff">
        <a class="yj-address-list yj-pad-tb-big">
          <span class="yj-address-icon"><img src="mobile/images/local.png" alt=""></span>
          <div class="yj-address-main">
            <p>租客:<span id="uName"></span></span><span class="yj-right" id="uTel"></span></p>
            <p class="yj-mar-t" id="cAddress"></p>
          </div>
          <span class="yj-address-more"><i class="layui-icon">&#xe602;</i></span>
        </a>
        <p class="yj-text-small yj-text-center yj-pad-b yj-address-note">(请在5分钟之类完成支付)</p>
      </div>
      
      <!-- 商品基本信息 -->
      <div class="yj-order-basicinfo yj-padding-big">
        <span class="yj-goods-thumbnail"><img src="" id="cPic"></span>
        <div class="yj-confirm-goods-textinfo">
          <p class="yj-elip-2">使用sharePark停车给你最极致的停车体验 推荐有奖</p>
          <div class="yj-goods-price yj-clearfix">
            <span >¥&nbsp;<span id="cPrice"></span></span>/小时
          </div>
        </div>
      </div>

      <script language="javascript" type="text/javascript">

</script>
      <!-- 订单金额清单 -->
      <div class="yj-bgfff yj-pad-lr">
        <ul class="yj-list yj-pad-lr">
          <li class="yj-list-item">选择租期
            <span class="yj-right yj-color-red">
              <div class="layui-input-inline">
                  <input type="text" class="layui-input" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss">
              </div>
              </span>
          </li>
          <li class="yj-list-item" id="choseVoucher">代金卷<span class="yj-right yj-color-red"><i class="layui-icon yj-mar-l" ><span id="moneyNum"></span>&#xe602;</i></span></li>

      </div>
        <div>
          <li class="yj-list-item" style="clear:both"><a class="yj-block yj-pay-type">
            &nbsp;&nbsp;&nbsp;支付方式
            <span class="yj-right yj-color-gray-light">
              <span class="yj-pay-style">余额支付</span>
              <i class="layui-icon yj-mar-l">&#xe602;</i>
            </span>
          </a></li>
        </ul>
      </div>
    </div>
<style>
        p{
            color: #999;
            text-indent: 2em;
            padding-bottom: 1em;
        }
        /*.yj-content{
            padding: 15px;
            height: 450px;
            width: 100%;
            box-sizing: border-box;
            overflow-y: scroll;
        }*/
		#wrapper {  
    position:relative;  
    z-index:1000;  
    width:100%;  
    height:400px ;  
    overflow:scroll ;  -webkit-overflow-scrolling:touch; padding-bottom:90px;

}
    </style>



    <div class="yj-mask-main yj-mask-main1 top yj-goodsattr-select" >
      <span class="layui-icon yj-close" onclick="maskOut()">&#x1007;</span>
      <div id="allVoucher">

      </div>

    </div>


    <div class="yj-goods-footer">

      <div class="yj-footer yj-pay-footer" >
        <div class="yj-pay-footer-money">
          总计：<span class="yj-color-red" id="countMoney"></span><span class="yj-color-red">&yen;</span>
        </div>
        <div class="yj-pay-confirm-btn">
          <button class="yj-footer-btn" id="grabSingle">支付</button>
        </div>
      </div>
    </div>

    <div class="yj-mask-body" onclick="maskOut()"></div>
    <input type="hidden" id="hiddenMoney"></input>
    <script th:src="@{/mobile/js/jquery.min.js}"></script>
  <script th:src="@{/mobile/layui/layui.js}"></script>
  <script src="mobile/js/jquery.min.js"></script>
  <script src="mobile/js/yj_js.js"></script>
  <script th:inline="javascript">
      var url = [[@{/}]];
          layui.use("layer", function () {
              var layer = layui.layer;
          })

        function getQueryVariable(variable)
        {
          var query = window.location.search.substring(1);
          var vars = query.split("&");
          for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
          }
          return(false);
        }

        layui.use('laydate', function(){
          var laydate = layui.laydate;

          //执行一个laydate实例
          laydate.render({
            elem: '#endTime',type: 'datetime',
            done: function(value, date){
              cancleMoney(value);
            }

          });

        })
        function cancleMoney(value){
          var time3 = Date.parse(value);
          time3 = time3/(1000*60);

          var nowTime =new Date();
          nowTime = Date.parse(nowTime)/(1000*60);
          if (nowTime > time3){
            alert("请选择正确时间");
            return;
          }
          var count = time3 - nowTime;

          var hours = (count /60);
          var newHours = hours+"";
          var countHours=newHours.split(".")[0];
          var countMinute = newHours.split(".")[1];
          if (countMinute != ""){
            countHours = parseInt(countHours);
            countHours +=1;
        }
          var cPrice = $("#cPrice").html();
          var countMoney = countHours * parseInt(cPrice);
          var moneyNum = $("#moneyNum").html();
          $("#hiddenMoney").val(countMoney);
          if (moneyNum != ""){
            var voucherMoney = moneyNum.split("￥")[0];

            $("#countMoney").html(countMoney - parseInt(voucherMoney));
          } else{
            $("#countMoney").html(countMoney);
          }

       }

     $(function(){
      var id = getQueryVariable("id");
       $.ajax({
         url: url + "lessor/findCarParkById?id="+id,
         success:function (result) {
            var carPark = result.result;
            $("#cAddress").append(carPark.cAddress);
            $("#cPic").attr("src", carPark.cPic);
            $("#cPrice").append(carPark.cPrice);
         }
       })

       //当前登录用户
       $.ajax({
          url:url+"userInfo/activeUserInfo",
          success:function (result) {
            $("#uName").html(result.uName);
            $("#uTel").html(result.uTel);
          }
       })
     })

  </script>


  <script type="text/javascript">

    formSelect();

    function formSelect(){

      $("#choseVoucher").click(function(){
        $.ajax({
          url:url+"voucher/findVouchers",
          success:function (result) {
            var conlog = "";
            for (var i =0;i<result.length;i++){
              var po = result[i];
              conlog +='<div class="yj-content">'+
                      '<div class="yj-padding-big yj-coupon">'+
                      ' <div class="yj-bgfff yj-coupon-item yj-mar-b-big">'+
                      '<div class="yj-coupon-info yj-pad-tb yj-pad-lr-big">'+
                      '          <p class="yj-color-gray yj-mar-tb-big yj-text-small">使用后可1:1兑换为余额</p>'+
                      '              <p class="yj-color-gray yj-text-small">获得时间：<span>'+po.vTerm+'</span></p>'+
                      '             </div>'+
                      '              <div class="yj-coupon-right">'+
                      '                       <p class="yj-colorfff yj-text-center yj-pad-t-big">&yen;<span class="yj-coupon-num">'+po.vSum+'</span></p>'+
                      '              <p class="yj-text-center yj-pad-t"><button class="yj-btn yj-coupon-user-btn" onclick="pointVoucher('+po.vId+','+po.vSum+')">使用</button></p>'+
                      '             </div>'+
                      '</div> '+
                      '</div> '+
                      '</div> ';
            }
             $("#allVoucher").html(conlog);
           }
        })

        maskIn(1);
        $(".yj-goods-footer .yj-goods-footer-index").hide();
      })
    }
    var vID ;
    function pointVoucher(vId,vSum){
      if ( $("#endTime").val() == ""){
        layer.msg("请选择租车时间",{icon:5,time:2000,anim:1});
        return;
    }

      vID = vId;
      $("#moneyNum").html(vSum+"￥");
      var hiddenMoney = $("#hiddenMoney").val();
      if (hiddenMoney != ""){

        $("#countMoney").html(parseInt(hiddenMoney)- parseInt(vSum));
    }
      maskOut();
    }

    $(function () {
      $("#grabSingle").click(function () {
          var time = $("#endTime").val();
          console.log("租车时间"+time);
          if (time == ""){
            layer.msg("请选择租车时间",{icon:5,time:2000,anim:1});
            return;
          }
          $.ajax({
            url:url+"alipay/payOrder",
            type:"post",
            data:{
              rentDate:time,
              voucherId:vID
            },
            success:function (result) {
              if(result.msg == "租车成功"){
               location.href="order_detail.html?id="+result.result.oId;
              } else if(result.msg == "账户余额不足，是否前往充值"){

                layer.confirm(result.msg, {
                  btn: ['前往','取消'] //按钮
                }, function(){
                  location.href="recharge.html";
                }, function(){

                });
              } else if(result.msg == "订单已失效"){
                layer.confirm(result.msg, {
                  btn: ['前往','取消'] //按钮
                }, function(){
                  location.href="carIndex.html";
                }, function(){

                });
              }
            }
          })
      })
    })
  </script>
</body>
</html>